<!-- 登录页 -->
<template>
    <div class="login">
        <!-- 引入account公共背景 -->
        <comAccount> </comAccount>

        <div class="loginBox">
            <h3>TP-LINK会员登录</h3>
            <el-form
                :model="ruleForm1"
                status-icon
                :rules="rules1"
                ref="ruleForm1"
                label-width="0"
                class="demo-ruleForm"
            >
                <!-- 手机号 -->
                <el-form-item prop="tel">
                    <el-input
                        v-model="ruleForm1.tel"
                        auto-complete="off"
                        placeholder="请输入手机号"
                    ></el-input>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item prop="pass">
                    <el-input
                        type="password"
                        v-model="ruleForm1.pass"
                        auto-complete="off"
                        placeholder="输入密码"
                    ></el-input>
                </el-form-item>

                <!-- 登录按钮 -->
                <el-form-item class="loginBtn">
                    <el-button
                        type="primary"
                        @click="submitForm('ruleForm1')"
                        style="width: 100%"
                        >登录</el-button
                    >
                    <p class="login" @click="gotoRegister">没有账号？去注册</p>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import ComAccount from "@/components/account/ComAccount.vue";
export default {
    name: "Login",
    data() {
        // 验证手机号是否合法
        let checkTel = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入手机号码"));
            } else if (!this.checkMobile(value)) {
                callback(new Error("手机号码不合法"));
            } else {
                callback();
            }
        };
        return {
            ruleForm1: {
                pass: "",
                tel: "",
            },
            rules1: {
                // pass: [{ validator: validatePass, trigger: "change" }],
                tel: [{ validator: checkTel, trigger: "change" }],
            },
            flag: true,
        };
    },
    components: {
        ComAccount,
    },
    methods: {
        // 验证手机号规范
        checkMobile(str) {
            let re = /^1\d{10}$/;
            if (re.test(str)) {
                return true;
            } else {
                return false;
            }
        },
        // 进入注册页
        gotoRegister() {
            this.$router.push({
                path: "/register/phone",
            });
        },
        // 提交登录
        async submitForm() {
            // 将用户的token保存到storge，用户信息和token直接存到store，这样方便管理用户状态
            // 在store里直接登录
            await this.$store.dispatch("loginAction", {
                phone: this.ruleForm1.tel,
                password: this.ruleForm1.pass,
            });
            this.$router.push({ path: "/" });
        },
    },
};
</script>

<style lang="scss" scoped>
.login {
    .loginBox {
        position: absolute;
        top: 200px;
        left: 300px;
        z-index: 999;
        width: 600px;
        background-color: #fff;
        h3 {
            padding: 40px 0 0;
            font-size: 24px;
            color: #0096ff;
            line-height: 40px;
            text-align: center;
            font-weight: 700;
        }
        .demo-ruleForm {
            ::v-deep .el-form-item {
                width: 400px;
                margin: 24px auto 0;
            }
            ::v-deep .el-input__inner {
                font-size: 14px;
                color: #333;
                line-height: 20px;
                border: none;
                padding-bottom: 4px;
                border-radius: 0;
                width: 100%;
                border-bottom: 1px solid rgb(204, 204, 204);
                &:focus {
                    outline: medium;
                }
            }
            ::v-deep .code {
                position: relative;
                .sendCode {
                    position: absolute;
                    right: 0;
                    bottom: 5px;
                    width: 100px;
                    height: 26px;
                    // background-color: #f7f7f7;
                    border: 1px solid #ccc;
                    cursor: pointer;
                    // color: #999;
                    border-radius: 2px;
                    font-size: 12px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .loginBtn {
                button {
                    border-radius: 0;
                    font-size: 16px;
                    color: #fff;
                    font-weight: 700;
                }
                p {
                    text-align: right;
                    font-size: 14px;
                    color: #0096ff;
                    cursor: pointer;
                    padding-bottom: 25px;
                }
            }
        }
    }
}
</style>
